<html>
<head>
<meta name="layout" content="main">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script>
$(function() {
	$("#submitButton").click(function() {

      // validate

      //submit
    	  var dataString = $("#patronForm").serialize();
  	  
    	  //alert (dataString);return false;
    	  $.ajax({
    	    type: "POST",
    	    //url: "http://localhost:8090/libraryUsers/rest/patron/addPatron",
    	    //url: "http://libraryusers.cloudfoundry.com/libraryUsers/rest/patron/addPatron",
    	    url: "${request.contextPath}/rest/patron/addPatron",
     	   
    	    data: dataString,
    	    success: function(msg) {
        	    if(msg.msgType == "success"){
    	    		jQuery('#SmsgArea').html(msg.successMsg);
    	    		jQuery('#msgArea').html("");
            	    jQuery("#formArea").html("");
        	    }

        	    if(msg.msgType == "exception"){
    	    		jQuery('#msgArea').html(msg.msg + "<br>Possible Reason: " + msg.err);
        	    }

        	    if(msg.msgType == "valF"){
	    		jQuery('#msgArea').html(msg.msg + "<br>Reasons:<br> ");
	    		 $.each(msg.err, function(i, val){
	    			 //jQuery('#msgArea').append((i+1) + "). " + val.i + "<br>") 
	    			 
	    			 jQuery('#msgArea').append('<g:message code="' + val.i + '" />' + "<br>") 

	    			 
		    		});
  	    }
    	    }
    	  });
    	  return false;
    	  
    });
  });
  
</script>
<style>
#msgArea {
	color: red;
}
</style>
</head>

<body>
<div class="nav" role="navigation">
	<ul>
		<li><a class="home" href="${createLink(uri: '/')}"><g:message code="default.home.label"/></a></li>
	</ul>
</div>
<br>
<div id="SmsgArea"></div><br>
<div id="msgArea"></div>
<div id="formArea">
<form id="patronForm">
<div>
<label for="username">
		<g:message code="patron.username.label" default="Username" />
		<span class="required-indicator">*</span>
	</label>
<input type="text" id="username" name="username"></input>
</div>

<div>
	<label for="postCode">
		<g:message code="patron.postCode.label" default="Post Code" />
		<span class="required-indicator">*</span>
	</label>

<input type="text" id="postCode" name="postCode"></input>
</div>
<div>
	<label for="emailAddress">
		<g:message code="patron.emailAddress.label" default="Email Address" />
		<span class="required-indicator">*</span>
	</label>
	<input type="text" id="emailAddress" name="emailAddress"></input>
</div>

<input type="button" id="submitButton" value="${message(code: 'default.button.create.label', default: 'Create')}"></input>

</form>
</div>
</body>
</html>